<template>
  <div class="app-container">

    <!-- 卡片食品介绍 -->
    <el-card class="box-card">
      <h3>食品上架</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">



        <el-form-item label="食品名称" prop="foodName">
          <el-input v-model="goods.foodName" />
        </el-form-item>

        <el-form-item label="食品图片">
          <el-upload action="http://localhost:9600/common/upload" list-type="picture" :show-file-list="false"
            :on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
            <!-- <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">

            </div> -->
            <img v-if="goods.foodImg" :src="goods.foodImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <el-image v-for="item in fileList" :key="item.uid" :src="item.url" fit="contain"
            style="max-width:200px; max-height:200px; margin-top:10px;"></el-image>
        </el-form-item>

        <el-form-item label="食品价格" prop="foodPrice">
          <el-input v-model="goods.foodPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <div class="dropdown">
          <template>
            所属商家编号
            <el-select v-model="goods.businessId" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </div>


        <el-form-item label="食品介绍">
          <editor :init="editorInit" v-model="goods.foodExplain" />
        </el-form-item>

        <el-form-item label="食品介绍">
          <el-input v-model="goods.remarks" />
        </el-form-item>

      </el-form>
    </el-card>


    <!-- 页面底部商家取消按钮 -->
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">上架</el-button>
    </div>

  </div>
</template>



<script>
import { publishGoods, listCatAndBrand } from '@/api/goods/goods'
import { createStorage, uploadPath } from '@/api/system/storage'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'
import TinymceEditor from "@/components/TEditor.vue"
import { getList } from "@/api/business/bussiness"


export default {
  name: 'GoodsCreate',
  // components: { Editor },
  components: {
    Editor: TinymceEditor,
  },
  data() {
    return {
      businessIds:[],
      businessList: undefined,
      options: [],
      fileList: [],
      value: '',
      uploadPath, // 文件上传路径
      goods: { foodImg: '', gallery: [] }, // 食品信息

      // 验证规则
      rules: {
        // foodId: [{ required: true, message: '食品编号不能为空', trigger: 'blur' }],
        // foodName: [{ required: true, message: '食品名称不能为空', trigger: 'blur' }]
      },
      // 富文本编辑器初始化
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        images_upload_handler: function (blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData).then(res => {
            success(res.data.data.url)
          }).catch(() => {
            failure('上传失败，请重新上传')
          })
        }
      }
    }
  },
  computed: {
    // 上传文件请求头添加Token
    headers() {
      return {
        'Shopping-Admin-Token': getToken()
      }
    }
  },
  created() {
    // 页面数据初始化
    this.init()

  },

  methods: {
    // 获取数据
    init: function () {

      getList().then((res) => {

        this.businessList = res.data.records
        console.log(this.businessList);
        this.businessList.forEach( (item, index, array) =>{
	// item数组中的当前项, index当前项的索引, array原始数组；

        this.businessIds.push(item.businessId)
})

        for (let item of this.businessIds) {
          var i = 0
          console.log(item);
          this.options.push({
            label: item,
            value: item

          })
          i+=1;
        }
        console.log(this.options);
      })



      // listCatAndBrand().then(response => {
      //   this.categoryList = response.data.data.categoryList
      //   this.brandList = response.data.data.brandList
      // })
    },

    // 取消食品上架钩子
    handleCancel: function () {

      this.$router.push({ path: '/goods/index' })
    },
    // 上架食品 钩子
    handlePublish: function () {
      // 构建数据
      const finalGoods = this.goods

      // 调用接口
      publishGoods(finalGoods).then(response => {
        this.$notify.success({
          title: '成功',
          message: '添加成功'
        })
        this.$router.push({ path: '/goods/index' })
      }).catch(response => {
        MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
          confirmButtonText: '确定',
          type: 'error'
        })
      })
    },

    // 食品图片上传
    uploadPicUrl: function (response) {

      this.goods.foodImg = response.data
      console.log(666666666);
      console.log(response.data.url);
    },
    // 上传文件个数限制
    uploadOverrun: function () {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!",
      });
    },

  }
}
</script>



<style>
.el-card {
  margin-bottom: 10px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.avatar-uploader .el-upload {
  width: 145px;
  height: 145px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}

.dropdown {
  padding-left: 80px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;

}

.dropdown .el-select .el-input {
  border-color: #409EFF;
  width: 200px;
}
</style>
